<template>
  <div>
    <div class="header">
      <div class="inputItem">
        <div class="title">货源方名称</div>
        <div class="inputBox">
          <el-input v-model="cargoOwnerName" @keyup.enter.native="initList(1)">
          </el-input>
        </div>
      </div>

      <!-- 查询 -->
      <div class="Btn_grounp">
        <el-button class="searchBtn" type="primary" size="small" icon="el-icon-search" @click="initList(1)">查询</el-button>
        <el-button class="clearBtn" type="plain" size="small" icon="el-icon-refresh-right" @click="CleanUp">清空</el-button>
        <el-button class="addBtn" type="primary" size="small" @click="showAddDialog()">新增</el-button>
      </div>
    </div>
    <div class="main">
      <div class="list">
        <el-table :data="records" style="width: 100%" ref="table">
          <el-table-column align="center" label="序号">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="name" label="企业全称">
          </el-table-column>
          <el-table-column align="center" prop="abbreviation" label="企业简称">
          </el-table-column>
          <el-table-column align="center" prop="location" label="所属地区">
          </el-table-column>
          <el-table-column align="center" prop="headName" label="联系人">
          </el-table-column>
          <el-table-column align="center" prop="headTel" label="联系电话">
          </el-table-column>
          <el-table-column align="center" prop="createTime" label="创建时间">
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <div>
                <el-button type="text" size="small" @click="
                  $router.push({
                    path: '/home/selfOperatedSettings/settingsManagement/details',
                    query: { ownerId: scope.row.ownerId },
                  })
                  ">详情</el-button>
                <el-button type="text" size="small" @click="emitItem(scope.row.ownerId)">编辑</el-button>
                <el-button type="text" size="small" @click="DeleteItem(scope.row.ownerId)">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="paginationBox">
        <el-pagination class="pagination" background layout="slot,prev, pager, next" :total="data.total * 1"
          :page-size="data.size * 1" :pager-count="5" @current-change="changePages($event)">
          <template slot>
            <span style="
                color: #686868;
                font-size: 12px;
                margin-right: 20px;
                display: inline-block;
              ">共{{ data.total ? data.total : "0" }}条,每页{{
                data.size ? data.size : "0"
              }}条</span>
          </template>
        </el-pagination>
      </div>
    </div>
    <!-- pointer-events: none;  style="pointer-events:auto;" -->
    <el-dialog class="addDialog" :title="dialogTitle" :visible.sync="visibleAddBox" width="860px">
      <!-- :class="{'pointerEventsAuto':dialogTitle=='新增'}" :class="{'pointerEventsNone':dialogTitle=='新增'}" -->
      <el-tabs v-model="activeName" :class="{ pointerEventsNone: dialogTitle == '新增' }" @tab-click="handleClick">
        <el-tab-pane label="基本信息" :class="{ pointerEventsAuto: dialogTitle == '新增' }" name="first">
          <div class="addItem">
            <el-form ref="basicInfoForm" status-icon :model="basicInfoForm" :rules="basicInfoRules" v-loading="loading"
              label-width="150px">
              <el-row>
                <el-col :span="24">
                  <titleVue :title="'企业信息'"></titleVue>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="企业全称" prop="name" class="">
                    <el-input placeholder="请输入内容" size="small" v-model="basicInfoForm.name">
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="企业简称" prop="abbreviation" class="">
                    <el-input placeholder="请输入内容" size="small" v-model="basicInfoForm.abbreviation">
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="统一社会信用代码" prop="taxpayerIdentificationNumber" class="">
                    <el-input placeholder="请输入内容" size="small" v-model="basicInfoForm.taxpayerIdentificationNumber">
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="法定代表人" prop="juridicalPerson" class="">
                    <el-input placeholder="请输入内容" size="small" v-model="basicInfoForm.juridicalPerson">
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="所属地区" prop="location" class="">
                    <el-cascader size="small" :filter-method="filterMethod" class="zdy_cascader" ref="cityCascader"
                      v-model="locationId" :options="newCity" @change="regionChange($event)" placeholder="不限" clearable
                      :filterable="true">
                    </el-cascader>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="注册地址" prop="comAddress" class="">
                    <el-input placeholder="请输入内容" size="small" v-model="basicInfoForm.comAddress">
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <titleVue :title="'财务信息'"></titleVue>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="开户行" prop="openingBank" class="">
                    <el-input placeholder="请输入内容" size="small" v-model="basicInfoForm.openingBank">
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="开户行账号" prop="bankAccountNumber" class="">
                    <el-input placeholder="请输入内容" size="small" v-model="basicInfoForm.bankAccountNumber">
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="银行名称" prop="bankName" class="">
                    <el-input placeholder="请输入内容" size="small" v-model="basicInfoForm.bankName">
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="支行名称" prop="subbranchName" class="">
                    <el-input placeholder="请输入内容" size="small" v-model="basicInfoForm.subbranchName">
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="分行编码" prop="branchCode" class="">
                    <el-input placeholder="请输入内容" size="small" v-model="basicInfoForm.branchCode">
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="分行省市" prop="branchCities" class="">
                    <el-input placeholder="请输入内容" size="small" v-model="basicInfoForm.branchCities">
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <titleVue :title="'联系信息'"></titleVue>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="公司电话" prop="companyTel" class="">
                    <el-input placeholder="请输入内容" size="small" v-model="basicInfoForm.companyTel">
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="负责人" prop="headName" class="">
                    <el-input placeholder="请输入内容" size="small" v-model="basicInfoForm.headName">
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="负责人电话" prop="headTel" class="">
                    <el-input placeholder="请输入内容" size="small" v-model="basicInfoForm.headTel">
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="负责人邮箱" prop="headMail" class="">
                    <el-input placeholder="请输入内容" size="small" v-model="basicInfoForm.headMail">
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24" style="display: flex; justify-content: flex-end">
                  <el-button class="cancelBtn" @click="resetForm('basicInfoForm')">重置</el-button>
                  <el-button class="submitBtn" type="primary" @click="BasicSubmit()">确定</el-button>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </el-tab-pane>
        <el-tab-pane label="项目信息" :class="{ pointerEventsAuto: dialogTitle == '新增' }" name="second">
          <div class="addItem">
            <button class="addRouteBtn" @click="showAddContractDialog()">
              <i class="el-icon-plus iconBtn"></i>
              <span>添加项目</span>
            </button>
            <div class="list">
              <el-table :header-cell-style="tableHeaderStyle40" :row-class-name="rowStyle" border style="width: 100%"
                :data="contractData">
                <el-table-column align="center" label="序号" width="45px">
                  <template slot-scope="scope">
                    {{ scope.$index + 1 }}
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="projectName" label="项目名称">
                </el-table-column>
                <el-table-column align="center" prop="charging" label="计费标准">
                  <template slot-scope="scope">
                    <div>
                      {{
                        scope.row.charging
                        ? scope.row.charging + scope.row.chargingUnit
                        : "无"
                      }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="settlementPeriod" label="结算账期">
                  <template slot-scope="scope">
                    <div>
                      {{
                        scope.row.settlementPeriod
                        ? scope.row.settlementPeriod +
                        scope.row.settlementPeriodUnit
                        : "无"
                      }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="earnestMoney" label="保证金">
                  <template slot-scope="scope">
                    <div>
                      {{
                        scope.row.earnestMoney
                        ? scope.row.earnestMoney + "元"
                        : "无"
                      }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="contractEndTime" label="合同结束日期" width="100px">
                  <template slot-scope="scope">
                    <div>
                      {{
                        scope.row.contractEndTime
                        ? scope.row.contractEndTime
                        : "无"
                      }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column align="center" label="操作">
                  <template slot-scope="scope">
                    <div>
                      <el-button type="text" size="small"
                        @click="getEmitInfoContract(scope.row.contractId)">编辑</el-button>
                      <el-button type="text" size="small" @click="deleteContract(scope.row.contractId)">删除</el-button>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <el-col :span="24" style="
                  display: flex;
                  justify-content: flex-end;
                  margin-top: 30px;
                ">
                <!--  <el-button class="cancelBtn" @click="activeName = 'first'">返回</el-button> -->
                <el-button class="submitBtn" type="primary" @click="activeName = 'third'">下一步</el-button>
              </el-col>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="线路信息" :class="{ pointerEventsAuto: dialogTitle == '新增' }" name="third">
          <div class="addItem">
            <button class="addRouteBtn" @click="showAddRouteDialog()">
              <i class="el-icon-plus iconBtn"></i>
              <span>添加线路</span>
            </button>

            <div class="list">
              <el-table :header-cell-style="tableHeaderStyle40" :row-class-name="rowStyle" border style="width: 100%"
                :data="routeTable">
                <el-table-column align="center" label="序号" width="50px">
                  <template slot-scope="scope">
                    {{ scope.$index + 1 }}
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="lineName" label="线路名称" width="120px">
                </el-table-column>
                <el-table-column align="center" prop="departurePlaceTable" label="发货地">
                  <template slot-scope="scope">
                    <div class="routeLine_1">
                      <span v-for="(item, i) in scope.row.departurePlaceTable" :key="i" class="textBtn">{{ item.address
                      }}{{
  i == scope.row.departurePlaceTable.length ? "，" : ""
}}</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="destinationPlaceTable" label="目的地">
                  <template slot-scope="scope">
                    <div class="routeLine_1">
                      <span v-for="(item, i) in scope.row.destinationPlaceTable" :key="i" class="textBtn">{{ item.address
                      }}{{
  i == scope.row.destinationPlaceTable.length
  ? "，"
  : ""
}}</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column align="center" label="操作" width="100px">
                  <template slot-scope="scope">
                    <div>
                      <el-button type="text" size="small" @click="getEmitRouteDetails(scope.row.lineId)">编辑</el-button>
                      <el-button type="text" size="small" @click="deleteRouteItem(scope.row.lineId)">删除</el-button>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <!--    <div class="line-1 routeLine">
                                <div class="textBtn">重庆光环购物公园</div>
                                <div class="textBtn">爱琴海购物</div>
                            </div> -->
              <el-col :span="24" style="
                  display: flex;
                  justify-content: flex-end;
                  margin-top: 30px;
                ">
                <el-button class="cancelBtn" @click="activeName = 'second'">返回</el-button>
                <el-button class="submitBtn" type="primary" @click="visibleAddBox = false">确 定</el-button>
              </el-col>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>

    <!-- 新增项目/编辑合同 -->
    <!-- status-icon -->
    <el-dialog class="addDialog" :title="dialogContractTitle" :visible.sync="visibleContractBox" width="840px">
      <!-- v-loading="loading" -->
      <el-form ref="addContractForm" :model="addContractForm" :rules="addContractRules" label-width="120px"
        v-loading="loading" style="padding-top: 20px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="项目名称" prop="projectName">
              <el-input size="small" v-model="addContractForm.projectName" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计费标准" prop="charging">
              <el-col :span="18">
                <el-input size="small" class="inputSelect_left" v-model="addContractForm.charging"
                  placeholder="请输入内容"></el-input>
              </el-col>
              <el-col :span="6">
                <el-form-item prop="chargingUnit">
                  <el-select size="small" class="inputSelect_right" placeholder="单位"
                    v-model="addContractForm.chargingUnit">
                    <el-option v-for="item in WeightArr" :key="item.value" :label="item.label" :value="item.label">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计费单价" prop="chargingPrice">
              <el-input size="small" v-model="addContractForm.chargingPrice" class="append_unit" placeholder="请输入内容">
                <div slot="suffix" style="padding-right: 10px; padding-left: 10px">
                  元
                </div>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发票类型" prop="invoiceType">
              <el-select size="small" v-model="addContractForm.invoiceType" placeholder="单位">
                <el-option v-for="item in invoiceArr" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发票税率" prop="taxRate">
              <el-input size="small" v-model="addContractForm.taxRate" class="append_unit">
                <div slot="suffix" style="padding-right: 10px; padding-left: 10px">
                  %
                </div>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结算账期" prop="settlementPeriod">
              <el-col :span="18">
                <el-input size="small" class="inputSelect_left" v-model="addContractForm.settlementPeriod"
                  placeholder="请输入内容"></el-input>
              </el-col>
              <el-col :span="6">
                <el-form-item prop="settlementPeriodUnit">
                  <el-select size="small" class="inputSelect_right" v-model="addContractForm.settlementPeriodUnit"
                    placeholder="单位">
                    <el-option v-for="item in timeArr" :key="item.label" :label="item.label" :value="item.label">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="合同期限" prop="contractPeriod">
              <el-col :span="18">
                <el-input size="small" class="inputSelect_left" v-model="addContractForm.contractPeriod"
                  placeholder="请输入内容"></el-input>
              </el-col>
              <el-col :span="6">
                <el-form-item prop="contractPeriodUnit">
                  <el-select size="small" class="inputSelect_right" v-model="addContractForm.contractPeriodUnit"
                    placeholder="单位">
                    <el-option v-for="item in termArr" :key="item.label" :label="item.label"
                      :value="item.label"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="保证金" prop="earnestMoney">
              <el-input size="small" v-model="addContractForm.earnestMoney" class="append_unit" placeholder="请输入内容">
                <div slot="suffix" style="padding-right: 10px; padding-left: 10px">
                  元
                </div>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="合同结束日期" prop="contractEndTime">
              <el-date-picker size="small" style="width: 100%" v-model="addContractForm.contractEndTime" type="date"
                placeholder="请选择日期" class="data_picker" value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button class="cancelBtn" @click="visibleContractBox = false">取 消</el-button>
        <el-button class="submitBtn" type="primary" @click="submitContract()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 新增线路/编辑线路 -->
    <el-dialog class="addDialog" :title="dialogRouteTitle" :visible.sync="visibleRouteBox" width="840px">
      <!--   v-loading="loading" -->
      <el-form :model="addRouteForm" :rules="addRouteRules" ref="addRouteForm" label-width="92px" v-loading="loading">
        <el-form-item label-width="0" prop="routeItem" v-for="(item, ItemIndex) in addRouteForm.routeItem"
          :key="ItemIndex">
          <div class="addRouteItem">
            <div class="formBox">
              <div style="width: 332px">
                <el-form-item label="路线名称" prop="lineName">
                  <el-input placeholder="请输入" v-model="addRouteForm.routeItem[ItemIndex].lineName"></el-input>
                </el-form-item>
              </div>
              <el-form-item label="发货地" prop="departurePlaceTable">
                <el-table class="placeTableStyle" :header-cell-style="tableHeaderStyle40" :row-class-name="rowStyle"
                  :data="addRouteForm.routeItem[ItemIndex].departurePlaceTable">
                  <el-table-column align="center" label="序号" width="50">
                    <template slot-scope="scope">
                      <div>
                        {{ scope.$index + 1 }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="地址" width="182px">
                    <template slot-scope="scope">
                      <el-form-item prop="">
                        <el-input class="inputAddress" placeholder="请输入发货地址"
                          @focus="isShowMap(scope.$index, '发货地', ItemIndex)" suffix-icon="el-icon-location-outline"
                          v-model="scope.row.address">
                        </el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="详细门牌号">
                    <template slot-scope="scope">
                      <el-form-item>
                        <el-input placeholder="请输入" v-model="scope.row.detail">
                        </el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="发货人">
                    <template slot-scope="scope">
                      <el-form-item>
                        <el-input v-model="scope.row.contact"> </el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="发货电话" width="103px">
                    <template slot-scope="scope">
                      <el-form-item>
                        <el-input placeholder="请输入" v-model="scope.row.phone">
                        </el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="操作">
                    <template slot-scope="scope">
                      <i class="iconfontcolor icon-a- commonStyle" v-show="scope.$index == 0" @click="
                        addrouteData(
                          'DeparturePlace',
                          scope.$index,
                          ItemIndex
                        )
                        "></i>
                      <i class="iconfontcolor icon-a-- commonStyle" v-show="scope.$index > 0" @click="
                        deleteRoute('DeparturePlace', scope.$index, ItemIndex)
                        "></i>
                    </template>
                  </el-table-column>
                </el-table>
              </el-form-item>

              <el-form-item label="目的地" prop="destinationPlaceTable">
                <el-table class="placeTableStyle" :header-cell-style="tableHeaderStyle40" :row-class-name="rowStyle"
                  :data="addRouteForm.routeItem[ItemIndex].destinationPlaceTable
                    " :header-row-style="{ height: '40px' }" :row-style="{ height: '48px' }">
                  <el-table-column align="center" label="序号" width="50">
                    <template slot-scope="scope">
                      <div>
                        {{ scope.$index + 1 }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="地址" width="182px">
                    <template slot-scope="scope">
                      <el-input placeholder="请输入收货地址" suffix-icon="el-icon-location-outline" v-model="scope.row.address"
                        @focus="isShowMap(scope.$index, '收货地', ItemIndex)">
                      </el-input>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="详细门牌号">
                    <template slot-scope="scope">
                      <el-input placeholder="请输入" v-model="scope.row.detail">
                      </el-input>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="收货人">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.contact"> </el-input>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="收货电话" width="103px">
                    <template slot-scope="scope">
                      <el-input placeholder="请输入" v-model="scope.row.phone">
                      </el-input>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="操作">
                    <template slot-scope="scope">
                      <i class="iconfontcolor icon-a- commonStyle" v-show="scope.$index == 0" @click="
                        addrouteData('destination', ItemIndex, ItemIndex)
                        "></i>
                      <i class="iconfontcolor icon-a-- commonStyle" v-show="scope.$index > 0" @click="
                        deleteRoute('destination', scope.$index, ItemIndex)
                        "></i>
                    </template>
                  </el-table-column>
                </el-table>
              </el-form-item>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <div style="display: flex; justify-content: flex-end">
        <el-button class="cancelBtn" @click="visibleRouteBox = false">取 消</el-button>
        <el-button class="submitBtn" type="primary" @click="addRouteSubmit()">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="地址详情" :visible.sync="detailsVisible" class="details_dialog">
      <div class="mapBox">
        <div class="addressInfo">
          <i class="iconfontcolor icon-dizhixiangqing"></i>
          <div class="info">
            <h3 class="placeName">渝北光环广场</h3>
            <div style="margin-bottom: 8px">
              重庆市渝北区湖彩路118号 2F-1406
            </div>
            <div style="display: flex">
              <div style="margin-right: 19px">王全胜</div>
              <div>19887220324</div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 地址搜索 -->

    <el-dialog title="地址搜索" class="map_dialog" :visible.sync="VisibleMap" width="500px">
      <div class="mapBox">
        <div class="addMapBox">
          <iframe class="map" src="/orderMap.html" ref="iframe" frameborder="0" marginheight="0" marginwidth="0"
            scrolling="no"></iframe>
        </div>
        <div style="display: flex; justify-content: flex-end; margin-left: auto">
          <el-button class="cancelBtn" @click="VisibleMap = false">取 消</el-button>
          <el-button class="submitBtn" type="primary" @click="addsearchAddress()">确 定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import httpApi from "@/http";
import titleVue from "@/components/titleVue";
import newCity from "@/common/newCity";
export default {
  props: {
    routeItemData: {
      typeof: Array,
      default: () => [],
    },
  },
  data() {
    let validateName = (rule, value, callback) => {
      let params = {};
      if (this.ownerId != "") {
        params = {
          name: this.basicInfoForm.name,
          ownerId: this.ownerId,
        };
      } else {
        params = {
          name: this.basicInfoForm.name,
        };
      }
      ////console.log('传参', params);
      httpApi.selfOperatedSettingsApi.auditBasicInfo(params).then((res) => {
        ////console.log('校验', res);
        if (res.data.code == 200) {
          callback(); //通过不传值
        } else if (res.data.code == 202) {
          callback(new Error("已存在")); //callback()传了参数字段就代表校验不通过
        }
      });
    };
    let validateCreditCode = (rule, value, callback) => {
      let params = {};
      if (this.ownerId != "") {
        params = {
          taxpayerIdentificationNumber:
            this.basicInfoForm.taxpayerIdentificationNumber,
          ownerId: this.ownerId,
        };
      } else {
        params = {
          taxpayerIdentificationNumber:
            this.basicInfoForm.taxpayerIdentificationNumber,
        };
      }
      ////console.log('统一', params);
      httpApi.selfOperatedSettingsApi.auditBasicInfo(params).then((res) => {
        ////console.log('校验', res);
        if (res.data.code == 200) {
          callback(); //通过不传值
        } else if (res.data.code == 202) {
          callback(new Error("已存在")); //callback()传了参数字段就代表校验不通过
        }
      });
    };
    let validateAbbreviation = (rule, value, callback) => {
      let params = {};
      if (this.ownerId != "") {
        params = {
          abbreviation: this.basicInfoForm.abbreviation,
          ownerId: this.ownerId,
        };
      } else {
        params = {
          abbreviation: this.basicInfoForm.abbreviation,
        };
      }
      httpApi.selfOperatedSettingsApi.auditBasicInfo(params).then((res) => {
        ////console.log('校验', res);
        if (res.data.code == 200) {
          callback(); //通过不传值
        } else if (res.data.code == 202) {
          callback(new Error("已存在")); //callback()传了参数字段就代表校验不通过
        }
      });
    };

    // let validateContractName = (rule, value, callback) => {
    //   let params = {};
    //   if (this.contractId != "") {
    //     params = {
    //       contractName: this.addContractForm.contractName,
    //       contractId: this.contractId,
    //     };
    //   } else {
    //     params = {
    //       contractName: this.addContractForm.contractName,
    //     };
    //   }
    //   ////console.log('传参', params);
    //   httpApi.selfOperatedSettingsApi.contractUnique(params).then((res) => {
    //     ////console.log('校验', res);
    //     if (res.data.code == 200) {
    //       callback(); //通过不传值
    //     } else if (res.data.code == 202) {
    //       callback(new Error("已存在")); //callback()传了参数字段就代表校验不通过
    //     }
    //   });
    // };
    // let validateContractNumber = (rule, value, callback) => {
    //   let params = {};
    //   if (this.contractId != "") {
    //     params = {
    //       contractNumber: this.addContractForm.contractNumber,
    //       contractId: this.contractId,
    //     };
    //   } else {
    //     params = {
    //       contractNumber: this.addContractForm.contractNumber,
    //     };
    //   }
    //   ////console.log('传参', params);
    //   httpApi.selfOperatedSettingsApi.contractUnique(params).then((res) => {
    //     ////console.log('校验', res);
    //     if (res.data.code == 200) {
    //       callback(); //通过不传值
    //     } else if (res.data.code == 202) {
    //       callback(new Error("已存在")); //callback()传了参数字段就代表校验不通过
    //     }
    //   });
    // };
    // 检查 项目名称 是否重复
    let checkProjectName = (rule, value, callback) => {
      let params = {};
      //console.log(this.ownerId != "")
      if (this.contractId != "") {
        params = {
          projectName: this.addContractForm.projectName,
          contactId: this.contractId,

        };
        //console.log(params)
      } else {
        params = {
          projectName: this.addContractForm.projectName,


        };
      }
      ////console.log('传参', params);
      httpApi.selfOperatedSettingsApi.checkProjectName(params).then((res) => {
        ////console.log('校验', res);
        if (res.data.code == 200) {
          callback(); //通过不传值
        } else if (res.data.code == 202) {
          callback(new Error("项目名称已存在")); //callback()传了参数字段就代表校验不通过
        }
      });
    };

    return {
      /* NO(0, "无需开票"),
ELECTRONIC(1, "电子发票"),
VAT_SPECIAL(2, "增值税发票"),
NORMAL(3, "普通发票"); */
      contractId: "",
      invoiceArr: [
        {
          value: "0",
          label: "无需开票",
        },
        {
          value: "1",
          label: "电子发票",
        },
        {
          value: "2",
          label: "增值税专用发票",
        },
        {
          value: "3",
          label: "普通发票",
        },
      ],
      dialogTitle: "新增",
      dialogContractTitle: "新增项目",
      ownerId: "", //存放id 用与判断 新增还是编辑的情况
      cargoOwnerName: "", //货主名称
      activeName: "first",
      records: [],
      data: {},
      pageCurrent: "1",
      size: "10",
      newCity: [],
      locationId: [],
      visibleAddBox: false,
      basicInfoForm: {
        name: "", //企业全称
        abbreviation: "", //企业简称
        taxpayerIdentificationNumber: "", //统一社会信用代码
        juridicalPerson: "", //法人
        location: "", //所属地区
        locationId: "", //所属地区id字符串
        comAddress: "", //注册地址
        openingBank: "", //开户行
        bankAccountNumber: "",
        bankName: "", //银行名称
        subbranchName: "", //支行名称
        branchCode: "", //分行编码
        branchCities: "", //分行省市
        companyTel: "", //公司电话
        headName: "", //负责人姓名
        headTel: "", //负责人电话
        headMail: "", //负责人邮箱
      },
      basicInfoRules: {
        name: [
          { required: true, message: "不能为空", trigger: "blur" },
          {
            message: "该企业名称已存在",
            validator: validateName,
            trigger: "blur",
          },
        ],
        abbreviation: [
          { required: true, message: "不能为空", trigger: "blur" },
          {
            message: "该企业简称已存在",
            validator: validateAbbreviation,
            trigger: "blur",
          },
        ],
        taxpayerIdentificationNumber: [
          { required: true, message: "不能为空", trigger: "blur" },
          {
            pattern:
              /^([0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}|[1-9]\d{14})$/,
            message: "18位或15位工商代码",
            trigger: "blur",
          },
          {
            message: "该统一社会信用代码已存在",
            validator: validateCreditCode,
            trigger: "blur",
          },
        ],

        juridicalPerson: [
          { required: true, message: "不能为空", trigger: "blur" },
        ],
        location: [{ required: true, message: "不能为空", trigger: "change" }],
        comAddress: [{ required: true, message: "不能为空", trigger: "blur" }],
        openingBank: [{ required: true, message: "不能为空", trigger: "blur" }],
        bankName: [{ required: true, message: "不能为空", trigger: "blur" }],
        subbranchName: [
          { required: true, message: "不能为空", trigger: "blur" },
        ],
        branchCode: [{ required: true, message: "不能为空", trigger: "blur" }],
        branchCities: [
          { required: true, message: "不能为空", trigger: "blur" },
        ],
        companyTel: [{ required: true, message: "不能为空", trigger: "blur" }],
        headName: [{ required: true, message: "不能为空", trigger: "blur" }],
        headTel: [{ required: true, message: "不能为空", trigger: "blur" }],
        headMail: [{ required: true, message: "不能为空", trigger: "blur" }],
        locationId: [
          { required: true, message: "不能为空", trigger: "change" },
        ],
        bankAccountNumber: [
          { required: true, message: "不能为空", trigger: "blur" },
        ],
        chargingUnit: [
          { required: true, message: "不能为空", trigger: "change" },
        ],
      },
      // 添加合同

      addContractForm: {
        charging: "", //计费标准
        chargingUnit: "",
        contractEndTime: "", //合同结束时间
        contractPeriod: "", //合同期限
        earnestMoney: "", //保证金
        chargingPrice: "", // 计费单价
        projectName: "", //项目名称
        settlementPeriod: "", //结算账期
        settlementPeriodUnit: "",
        invoiceType: "", //发票类型
        taxRate: "", //发票税率
        contractPeriodUnit: "", //合同期限单位
        ownerId: "", //货主id
      },
      addContractRules: {
        projectName: [{ required: true, message: "不能为空", trigger: "blur" },
        {
          message: "该项目名称已存在",
          validator: checkProjectName,
          trigger: "blur",
        }],
      },
      visibleContractBox: false, //新增项目弹框
      contractId: "", //通过合同是否有id判断是新增还是编辑
      contractData: [],
      // 合同期限 选择
      termArr: [
        {
          value: "1",
          label: "年",
        },
        {
          value: "2",
          label: "月",
        },
        {
          value: "3",
          label: "日",
        },
      ],
      // 结算周期选项
      timeArr: [
        {
          value: "1",
          label: "年",
        },
        {
          value: "2",
          label: "月",
        },
        {
          value: "3",
          label: "日",
        },
      ],
      // 计费标准选项
      WeightArr: [
        {
          value: "1",
          label: "车",
        },
        {
          value: "2",
          label: "吨",
        },
        {
          value: "3",
          label: "件",
        },
      ],

      routeTable: [],

      /* 添加线路 */

      dialogRouteTitle: "添加线路",
      lineId: "",

      iframeWin: {}, //iframe绑定的页面的对象。
      detailsVisible: false,
      searchValue: "",
      VisibleMap: false,
      ItemIndex: "", //记录线路routeItem[序号]
      PlaceLabel: "", //记录 发货地 或 目的地
      index: "", //记录departurePlaceTable[序号] 或 destinationPlaceTable[序号]
      visibleRouteBox: false,
      /*  addRouteForm: {
                 routeItem: [
                     {
                         lineName: "重庆-成都", //线路名称
                         departurePlaceTable: [{
                             address: "重庆市渝中区重庆市人民大礼堂",
                             detail: "17-04",
                             contact: "符周",
                             phone: "13144447777",
                             //addressType: "0",
                             lat: "29.56784854291732",
                             lng: "106.56045947497879",
                         }],
                         destinationPlaceTable: [{
 
                             address: "重庆市渝中区重庆市妇幼保健院(七星岗院区)",
                             detail: "11-2",
                             contact: "周福",
                             phone: "13129287777",
                             //addressType: "1",
                             lat: "29.560270266253877",
                             lng: "106.57262585531025",
                         }]
                     },
                 ]
             }, */
      addRouteForm: {
        routeItem: [
          {
            lineName: "", //线路名称
            departurePlaceTable: [
              {
                address: "",
                detail: "",
                contact: "",
                phone: "",
                //addressType: "0",
                lat: "",
                lng: "",
              },
            ],
            destinationPlaceTable: [
              {
                address: "",
                detail: "",
                contact: "",
                phone: "",
                //addressType: "1",
                lat: "",
                lng: "",
              },
            ],
          },
        ],
      },

      addRouteRules: {
        lineName: [],
        destinationPlaceTable: [],
        departurePlaceTable: [],
      },
      //发货地默认空对象
      DepartureDefault: {
        //addressType: "0",
        address: "",
        detail: "",
        contact: "",
        phone: "",
        lat: "",
        lng: "",
      },

      // 目的地
      destinationDefault: {
        // addressType: "1",
        address: "",
        detail: "",
        contact: "",
        phone: "",
        lat: "",
        lng: "",
      },

      loading: false,
    };
  },
  methods: {
    tableHeaderStyle40({ row, column, rowIndex, columnIndex }) {
      return "font-size:12px;fontWweight:bold;color:#262626;backgroundColor:#F5F5F5;height:40px;paddingTop:8px;paddingBottom:8px;";
    },
    rowStyle({ row, rowIndex }) {
      return "tableRowStyleName";
    },
    changePages(val) {
      this.pageCurrent = val;
      this.initList();
    },
    handleClick() { },
    showAddContractDialog() {
      this.contractId = ''
      this.visibleContractBox = true;
      this.dialogContractTitle = "新增项目";
      // for (let key in this.addContractForm) {
      //     ////console.log(this.addContractForm[key] != 'ownerId');
      //     if (this.addContractForm[key] != 'ownerId' ) {
      //         this.addContractForm[key] = ''
      //     }
      // }

      if (this.$refs["addContractForm"] !== undefined) {
        this.$refs["addContractForm"].resetFields();
      }

      ////console.log('合同111表单', this.addContractForm);
    },

    initList(current) {
      let params = {
        current: current || this.pageCurrent,
        size: this.size,
        name: this.cargoOwnerName,
      };
      httpApi.selfOperatedSettingsApi
        .getSelfCargoOwnerList(params)
        .then((res) => {
          ////console.log(res);
          this.data = res.data.data;
          this.records = res.data.data.records;
          ////console.log("自营货主data", this.data);
          ////console.log("自营货主列表数据", this.records);
        });
    },
    showAddDialog() {
      this.activeName = "first";
      this.visibleAddBox = true;
      this.dialogTitle = "新增";
      this.ownerId = "";
      this.contractData = [];
      this.routeTable = [];
      for (let key in this.basicInfoForm) {
        this.basicInfoForm[key] = "";
      }
      this.locationId = [];
    },
    BasicSubmit() {
      this.loading = true;

      this.$refs["basicInfoForm"].validate((valid) => {
        if (valid) {
          ////console.log('基本信息表单数据', this.basicInfoForm);
          if (this.ownerId == "") {
            httpApi.selfOperatedSettingsApi
              .addBasicInfo(this.basicInfoForm)
              .then((res) => {
                ////console.log('新增基本信息结果', res);
                if (res.data.code == 200) {
                  this.$message.success("新增基本信息成功");
                  //this.visibleAddBox = false

                  this.ownerId = res.data.msg;
                  ////console.log('id', this.ownerId);
                  this.activeName = "second";

                  this.initList();
                }
                this.loading = false;
              });
          } else if (this.ownerId.length != 0) {
            ////console.log('表单数据', this.basicInfoForm);
            httpApi.selfOperatedSettingsApi
              .emitBasicInfo(this.basicInfoForm)
              .then((res) => {
                ////console.log('编辑基本信息结果', res);
                if (res.data.code == 200) {
                  this.$message.success("编辑基本信息成功");
                  this.visibleAddBox = false;

                  this.initList();
                }
                this.loading = false;
              });
          }
        } else {
          ////console.log('error submit!!');
          this.$message.error("请填写完整信息");
          this.loading = false;
          return false;
        }
      });
    },
    getContractInfo(ownerId) {
      ////console.log('货主id', ownerId);
      httpApi.selfOperatedSettingsApi
        .getContractInfo({ ownerId })
        .then((res) => {
          ////console.log('合同列表', res);
          this.contractData = res.data.data.records;
        });
    },
    emitItem(ownerId) {
      this.ownerId = ownerId;
      this.dialogTitle = "编辑";
      this.visibleAddBox = true;

      httpApi.selfOperatedSettingsApi
        .getBasicDetails({ ownerId })
        .then((res) => {
          ////console.log('编辑回填基本信息', res);

          for (let k in this.basicInfoForm) {
            for (let i in res.data.data) {
              if (k == i) {
                this.basicInfoForm[k] = res.data.data[i];
              }
            }
          }
          this.locationId = res.data.data.locationId.split(",");
          this.basicInfoForm.ownerId = this.ownerId;
          ////console.log(this.locationId);

          ////console.log('回填表单数据', this.basicInfoForm);
        });
      //获取合同列表表格信息
      this.getContractInfo(ownerId);
      //获取线路列表表格信息
      this.getRouteList(ownerId);
    },
    // 提交新增项目
    submitContract() {
      this.loading = true;

      this.$refs["addContractForm"].validate((valid) => {
        //console.log(this.addContractForm);
        if (valid) {
          if (this.dialogContractTitle == "新增项目") {
            //新增项目

            this.addContractForm.ownerId = this.ownerId;
            ////console.log('新增项目表单', this.addContractForm);
            httpApi.selfOperatedSettingsApi
              .addContractInfo(this.addContractForm)
              .then((res) => {
                ////console.log('新增项目响应结果', res)
                if (res.data.code == 200) {
                  this.$message.success("新增项目成功");
                  this.getContractInfo(this.ownerId);
                  this.visibleContractBox = false;

                  this.initList();
                }
                this.loading = false;
              });
          } else if (this.dialogContractTitle == "编辑项目") {
            this.addContractForm.ownerId = this.ownerId;
            this.addContractForm.contractId = this.contractId;
            ////console.log('编辑合同请求传参', this.addContractForm);

            httpApi.selfOperatedSettingsApi
              .emitContractInfo(this.addContractForm)
              .then((res) => {
                ////console.log('编辑合同响应结果', res)
                if (res.data.code == 200) {
                  this.$message.success("编辑合同成功");
                  this.getContractInfo(this.ownerId);
                  this.visibleContractBox = false;

                  this.initList();
                }
                this.loading = false;
              });
          }
        } else {
          this.$message.error("请填写完整信息");
          this.loading = false;
          return false;
        }
      });
    },
    getEmitInfoContract(contractId) {
      this.$nextTick(() => {
        this.$refs['addContractForm'].clearValidate();  //移除校验结果
      })

      //获取编辑合同的回填数据
      this.contractId = contractId;
      //console.log(contractId)

      this.visibleContractBox = true;
      this.dialogContractTitle = "编辑项目";

      let params = {
        contractId: contractId,
      };
      httpApi.selfOperatedSettingsApi.ContractDetails(params).then((res) => {
        ////console.log('合同信息回填res', res);
        for (let k in this.addContractForm) {
          for (let i in res.data.data) {
            if (k == i) {
              this.addContractForm[k] = res.data.data[i];
              break;
            }
          }
        }
        ////console.log('合同表单', this.addContractForm);
      });
    },

    deleteContract(contractId) {
      this.$confirm("此操作将删除该合同, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let params = {
            contractId: contractId,
          };
          // 发起单个删除请求
          ////console.log(params);

          httpApi.selfOperatedSettingsApi
            .deleteContractInfo(params)
            .then((res) => {
              ////console.log('删除合同结果', res);
              if (res.data.code == 200) {
                this.getContractInfo(this.ownerId);
                //删除后 更新列表数据
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
              } else {
                this.$message({
                  type: "error",
                  message: "删除失败!",
                });
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作",
          });
        });
    },
    showAddRouteDialog() {
      this.visibleRouteBox = true;
      this.dialogRouteTitle = "添加线路";

      //清空表单数据,确保空表单
      let { departurePlaceTable, destinationPlaceTable } =
        this.addRouteForm.routeItem[0];
      (this.addRouteForm.routeItem[0].lineName = ""),
        departurePlaceTable.forEach((item) => {
          for (let key in item) {
            item[key] = "";
          }
        });
      destinationPlaceTable.forEach((item) => {
        for (let key in item) {
          item[key] = "";
        }
      });
    },
    // 搜索地区时,
    filterMethod(node, keyword) {
      if (node.text.indexOf(keyword) != -1) {
        //////console.log('node', node);
        return node.label;
      }
      //////console.log('keyword',keyword);
    },
    regionChange(val) {
      //////console.log(val);
      // 把得到的数组转为字符传
      if (val.length != 0) {
        this.region = val;
        // getNodeByValue	获取选中的节点信息
        // this.$refs.cityCascader.getCheckedNodes()[0]这方法手动点击级联选择器 可以获取节点信息, 搜索选取的 则拿不到节点信息
        var labelArr =
          this.$refs["cityCascader"].panel.getNodeByValue(val).pathLabels;
        let idArr = this.$refs["cityCascader"].panel.getNodeByValue(val).path;
        this.basicInfoForm.locationId = idArr.join(",");
        this.basicInfoForm.location = labelArr.join("/");
        ////console.log('loaction', this.basicInfoForm.location);
      } else if (val.length == 0) {
        this.basicInfoForm.location = "";
      }
    },
    DeleteItem(ownerId) {
      this.$confirm("此操作将删除该自营货主, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let params = {
            ownerId: ownerId,
          };
          // 发起单个删除请求
          ////console.log(params);

          httpApi.selfOperatedSettingsApi
            .deleteCargoOwnerItem(params)
            .then((res) => {
              ////console.log('删除结果', res);
              if (res.data.code == 200) {
                this.initList();
                //删除后 更新列表数据
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
              } else {
                this.$message({
                  type: "error",
                  message: "删除失败!",
                });
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作",
          });
        });
    },

    CleanUp() {
      (this.cargoOwnerName = ""), this.initList(1);
    },

    addrouteData(params, scope, ItemIndex) {
      ////console.log('item', scope);

      const { departurePlaceTable, destinationPlaceTable } =
        this.addRouteForm.routeItem[ItemIndex];
      ////console.log(this.addRouteForm.routeItem[ItemIndex]);
      if (params == "DeparturePlace") {
        // 发货地
        //发货地表格加一行数据
        departurePlaceTable.push(
          JSON.parse(JSON.stringify(this.DepartureDefault))
        );
        //解决表格序号
      } else if (params == "destination") {
        destinationPlaceTable.push(
          JSON.parse(JSON.stringify(this.destinationDefault))
        );
      }
    },
    deleteRoute(params, index, ItemIndex) {
      const { departurePlaceTable, destinationPlaceTable } =
        this.addRouteForm.routeItem[ItemIndex];
      if (params == "DeparturePlace") {
        departurePlaceTable.splice(index, 1);
        departurePlaceTable.forEach((item, index) => { });
      } else if (params == "destination") {
        destinationPlaceTable.splice(index, 1);
        destinationPlaceTable.forEach((item, index) => { });
      }
    },
    //显示地图搜索
    isShowMap(index, PlaceLabel, ItemIndex) {
      this.VisibleMap = true;
      //存放序号
      this.ItemIndex = ItemIndex;
      this.PlaceLabel = PlaceLabel;
      this.index = index;
    },
    // 回填地址信息到输入框  通过存放的序号 找到输入框回填数据
    addsearchAddress() {
      let mood = this.$refs.iframe.contentWindow.ToManualRoamFunc();

      ////console.log('ToManualRoamFunc', mood);
      localStorage.getItem("addressInfoItem", JSON.stringify(mood));

      ////console.log('拿到了吗', JSON.parse(localStorage.getItem('addressInfoItem')));
      if (!localStorage.getItem("addressInfoItem")) {
        this.$message.error("请搜索选择地址信息");
        return;
      }

      const { lat, lng, address } = JSON.parse(
        localStorage.getItem("addressInfoItem")
      );

      if (this.PlaceLabel == "发货地") {
        ////console.log(this.addRouteForm.routeItem[this.ItemIndex].destinationPlaceTable[this.index]);
        localStorage.removeItem("addressInfoItem");
        this.addRouteForm.routeItem[this.ItemIndex].departurePlaceTable[
          this.index
        ].address = address;
        this.addRouteForm.routeItem[this.ItemIndex].departurePlaceTable[
          this.index
        ].lng = lng;
        this.addRouteForm.routeItem[this.ItemIndex].departurePlaceTable[
          this.index
        ].lat = lat;
      } else if ((this.PlaceLabel = "目的地")) {
        this.addRouteForm.routeItem[this.ItemIndex].destinationPlaceTable[
          this.index
        ].address = address;
        this.addRouteForm.routeItem[this.ItemIndex].destinationPlaceTable[
          this.index
        ].lng = lng;
        this.addRouteForm.routeItem[this.ItemIndex].destinationPlaceTable[
          this.index
        ].lat = lat;
        ////console.log('目的地数据', this.addRouteForm.routeItem[this.ItemIndex].destinationPlaceTable);
        localStorage.removeItem("addressInfoItem");
      }
      this.VisibleMap = false;
    },
    addRouteSubmit() {
      this.loading = true;

      let params = {
        lineName: this.addRouteForm.routeItem[0].lineName,
        startAddressList: this.addRouteForm.routeItem[0].departurePlaceTable,
        endAddressList: this.addRouteForm.routeItem[0].destinationPlaceTable,
        ownerId: this.ownerId,
      };

      //线路不为空验证
      if (params.lineName == "") {
        this.$message.error("请填写路线名称");
        return;
      } else {
        params.startAddressList.forEach((item) => {
          delete item.tags;
          delete item.name;
          delete item.remark;
          ////console.log('添加线路请求传参表单', params);
          for (let key in item) {
            //key为在遍历对象中的每一个属性的属性名  term[key]为在遍历对象中的每一个key属性名对应的属性值 term为被遍历的对象
            ////console.log('属性值', item[key]);

            if (item[key] === "") {
              this.$message.error("请填写发货地信息");
              return;
            }
          }
        });
        params.endAddressList.forEach((item) => {
          delete item.tags;
          delete item.name;
          delete item.remark;
          for (let key in item) {
            //key为在遍历对象中的每一个属性的属性名  term[key]为在遍历对象中的每一个key属性名对应的属性值 term为被遍历的对象
            if (item[key] === "") {
              this.$message.error("请填写目的地信息");
              return;
            }
          }
        });
      }
      //添加线路请求
      if (this.dialogRouteTitle == "添加线路") {
        httpApi.selfOperatedSettingsApi.addRouteInfo(params).then((res) => {
          ////console.log('添加线路响应res', res);

          if (res.data.code == 200) {
            this.$message.success("添加线路成功");
            this.getRouteList(this.ownerId);
            this.visibleRouteBox = false;
          }
          this.loading = false;
        });
      } else if (this.dialogRouteTitle == "编辑线路") {
        params.lineId = this.lineId;
        ////console.log('编辑线路传参',params);
        httpApi.selfOperatedSettingsApi.UpdateRoute(params).then((res) => {
          ////console.log('编辑线路响应res', res);
          if (res.data.code == 200) {
            this.$message.success("编辑线路成功");
            this.getRouteList(this.ownerId);
            this.visibleRouteBox = false;
          }
          this.loading = false;
        });
      }
    },
    // 重置校验,并清空表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
      for (let key in this.basicInfoForm) {
        this.basicInfoForm[key] = "";
      }
      this.locationId = [];
    },
    // 获取线路列表
    getRouteList(ownerId) {
      let params = {
        ownerId: ownerId,
      };
      httpApi.selfOperatedSettingsApi.getRouteInfo(params).then((res) => {
        ////console.log('线路列表', res);
        this.routeTable = res.data.data;
      });
    },
    getEmitRouteDetails(lineId) {
      this.$refs['addRouteForm'].clearValidate();
      this.lineId = lineId;
      ////console.log('表单', this.addRouteForm.routeItem[0]);
      this.dialogRouteTitle = "编辑线路";
      ////console.log('编辑路线回填请求传参', { lineId: lineId });
      httpApi.selfOperatedSettingsApi
        .getRouteDetails({ lineId })
        .then((res) => {
          //删除多余参数
          res.data.data;
          delete res.data.data.updateTime;
          delete res.data.data.name;
          delete res.data.data.updateBy;
          delete res.data.data.tags;
          delete res.data.data.remark;
          ////console.log('编辑路线回填res', res);

          ////console.log(this.addRouteForm.routeItem[0]);
          for (let k in this.addRouteForm.routeItem[0]) {
            for (let i in res.data.data) {
              if (k == i) {
                this.addRouteForm.routeItem[0][k] = res.data.data[i];
                //////console.log('回填测试',this.addRouteForm.routeItem[0][k], res.data.data[i]);
              }
            }
          }
          this.visibleRouteBox = true;
        });
    },

    deleteRouteItem(lineId) {
      this.$confirm("此操作将删除该路线, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let params = {
            lineId: lineId,
          };
          // 发起单个删除请求
          ////console.log('删除请求传参', params);

          httpApi.selfOperatedSettingsApi
            .deleteRouteItem(params)
            .then((res) => {
              ////console.log('删除结果', res);
              if (res.data.code == 200) {
                this.getRouteList(this.ownerId);
                //删除后 更新列表数据
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
              } else {
                this.$message({
                  type: "error",
                  message: "删除失败!",
                });
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作",
          });
        });
    },
      // 记录滚动距离
      scrollEvent(res) {
      this.$route.meta.scrollTop = res.target.scrollTop
    },
  },
  activated() {
    //组件激活时监听表格滚动条位置,
    this.$refs.table.bodyWrapper.addEventListener('scroll',this.scrollEvent,false)
    // 激活设置滚动位置
    this.$refs.table.bodyWrapper.scrollTop=this.$route.meta.scrollTop 
  },
  beforeRouteLeave(to, from, next) {
    // 为了节省资源，再离开页面的时候关闭对于scroll事件的监听
    this.$refs.table.bodyWrapper.removeEventListener('scroll', this.scrollEvent)
    next()
  },



  mounted() {
    this.newCity = newCity;
    this.initList();
  },
  components: {
    titleVue,
  },
};
</script>

<style lang="scss" scoped>
.header {
  height: 76px;
  width: 100%;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 0 29px;

  .Btn_grounp {
    display: flex;
    margin-left: auto;

    .searchBtn {
      width: 80px;
      height: 32px;
      color: #fff;
      font-size: 12px;
    }

    .clearBtn {
      width: 80px;
      height: 32px;
      color: #262626;
      font-size: 12px;
    }

    .addBtn {
      width: 56px;
      height: 32px;
    }
  }

  .inputItem {
    display: flex;
    align-items: center;
    margin-right: 23px;

    >.title {
      color: #262626;
      font-size: 12px;
      margin-right: 7px;
    }

    >.inputBox {
      width: 160px;

      .select {
        ::v-deep .el-input__icon {
          line-height: 0;
        }
      }

      ::v-deep .el-input__inner {
        height: 32px;
        font-size: 12px;
      }

      ::v-deep .el-input__inner::placeholder {
        color: #c3c3c3;
        font-size: 12px;
      }
    }
  }
}

.main {
  width: 100%;
  height: calc(100vh - 275px);
  background-color: #fff;
  padding: 0px 30px;

  .list {
    height: calc(100% - 48px);
    width: 100%;

    .tag {
      width: 63px;
      height: 28px;
      font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      background-color: #ecf5fe;
      color: #1890ff;

      .dian {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        margin-right: 4px;
        color: #1890ff;
      }
    }

    ::v-deep .el-table__body-wrapper {
      height: calc(100vh - 372px);
      overflow-y: scroll;
    }

    // 表头样式
    ::v-deep .el-table__header th {
      background-color: #f0f6fd;
      color: #262626;
      font-size: 12px;
      font-weight: bold;
      text-align: center;

      // 表 body的td
      ::v-deep .el-table__body td {
        color: #595959;
        font-size: 12px;
      }
    }

    .stateBtns {
      height: 30px;
      width: 76px;

      ::v-deep .el-button {
        height: 30px;
        width: 76px;
        font-size: 12px;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 30px;
      }

      .waitPass {
        background-color: #ecf5fe;
        color: #1890ff;
      }

      .noPass {
        background-color: #fde8e9;
        color: #f7555d;
      }
    }
  }

  .paginationBox {
    width: 100%;
    background-color: #fff;
    display: flex;
    height: 48px;
    align-items: center;

    .pagination {
      margin-left: auto;
    }
  }
}

.addDialog {
  ::v-deep .el-dialog__header {
    border-bottom: 1px solid #f0f0f0;
    padding: 15px 20px;
    color: #262626;
    font-size: 14px;
    font-weight: bold;
    height: 50px;
  }

  ::v-deep .el-dialog__title {
    font-size: 14px;
    color: #303133;
    font-weight: bold;
  }

  ::v-deep .el-dialog__body {
    padding: 0px 30px 24px 30px;
  }

  ::v-deep .el-tabs__nav {
    margin-left: 0 !important;
  }

  //反馈图标颜色
  ::v-deep .el-form-item.is-error .el-input__validateIcon {
    color: #f56c6c;
  }

  ::v-deep .el-input__validateIcon {
    color: #1890ff;
  }

  .addRouteItem {
    .formBox {
      padding: 23px 42px 31px 0px;
      overflow-y: scroll;
      width: 100%;

      ::v-deep .el-table__header th {
        background-color: #f5f5f5;
        color: #262626;
        font-size: 12px;
        font-weight: bold;
        text-align: center;

        // 表 body的td
        ::v-deep .el-table__body td {
          color: #666666;
          font-size: 12px;
        }
      }

      //   表单
      ::v-deep .el-form-item__label {
        line-height: 32px;
        font-size: 12px;
        color: #262626;
        padding-top: 4px;
      }

      ::v-deep .el-input__inner {
        line-height: 32px;
        height: 32px;
        //padding: 0 20px 0 10px;
      }

      // 发货地 目的地表格样式
      .placeTableStyle {
        // ::v-deep .el-table .el-table__cell {
        //   padding: 0px;
        // }

        ::v-deep .addRoute_dialog .formBox[data-v-626ecdae] .el-table__header th {
          height: 40px;
        }

        ::v-deep .el-input__icon {
          line-height: 0;
        }

        .commonStyle {
          font-size: 19px;
          cursor: pointer;
          transition: 0.2s;

          &:hover {
            opacity: 0.8;
          }
        }
      }
    }
  }
}

.addRouteBtn {
  background-color: #1890ff;
  border-radius: 4px;
  height: 32px;
  width: 105px;
  color: #ffffff;
  font-size: 12px;
  padding: 8px 17px 9px 17px;
  transition: 0.2s;
  cursor: pointer;
  margin: 0px 0 16px 0;

  .iconBtn {
    margin-right: 7px;
    font-size: 15px;
  }

  &:hover {
    opacity: 0.8;
  }
}

.textBtn {
  color: #1890ff;
  font-size: 12px;
  transition: 0.2s;
  cursor: pointer;

  &:hover {
    opacity: 0.8;
  }
}

.routeLine {
  height: 44px;
  width: 165px;
  display: flex;
  align-items: center;
  margin: 0 auto;
}

.inputSelect_right {
  width: 70px;
  height: 32px;

  ::v-deep .el-input__inner {
    border-radius: 0px 4px 4px 0px;
    // border-left: none;
    background-color: #f5f7fa;
    font-size: 12px;
    color: #606266;
  }

  ::v-deep .inputSelect_right {
    display: none !important;
  }
}

.pointerEventsNone {
  pointer-events: none;
}

.pointerEventsAuto {
  pointer-events: auto;
}

.map_dialog {
  ::v-deep .el-dialog__header {
    border-bottom: 1px solid #f0f0f0;
    color: #262626;
    font-size: 14px;
    height: 50px;
    display: flex;
    align-items: center;
    font-weight: bold;
  }

  //关闭图标
  ::v-deep .el-dialog__headerbtn .el-dialog__close {
    font-size: 15px;
  }

  ::v-deep .el-dialog__body {
    padding: 6px 7px;
  }

  .mapBox {
    display: flex;
    flex-direction: column;
    align-items: center;

    .addMapBox {
      margin-bottom: 15px;

      .map {
        width: 486px;
        height: 372px;
      }
    }
  }
}

.routeLine_1 {
  display: flex;
  overflow: hidden;
  //width: 140px;
  margin: 0px auto;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
